<html>
<body>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<div id="text"></div>
<script>
var TextComponent=React.createClass({  //这里不要忘了是createClass,

propTypes:  //限定属性类型
{
text:React.PropTypes.string.isRequired,
},

getDefaultProps:function(){ //设置默认的属性props
return {
text:'',
};
},

render:function(){  //这里必须返回一个组件
return React.DOM.div(null,
//使用封装好后的DOM组件集合时，可以不设置其组件内容，但是一定要设置其组件属性
React.DOM.input({ defaultValue:this.props.text,}),React.DOM.h1(null,this.props.text.length) //这里不要写成h了，DOM中没有h
);
},

});
//输出组件，生成react应用
ReactDOM.render(
React.createElement(TextComponent,{
text:"hello,我是text",
}),
document.getElementById("text") //这个参数只有在应用的最外层才有，组件里面是没有这个参数的
);
</script>

</body>
</html>

